import React, { FC, useRef } from 'react'
import { Trigger, TriggerInstance } from '@kedacom/react-next'
import {
	IconStatusMore,
	getStatusIcon,
	StatusDropDownWrap,
	statusType,
	statusSplitDropDown,
	ItemStatusWrap,
	StatusIconComponent,
} from '../../../../../../components'
import { useMccStore } from '@/pages/manager/store'
import { Mt } from '@/api/manager/mt'
import { useTableInteractiveStore } from '../../store'

interface ItemStatusProps {
	mcc: Mt
	propWidth: number
}
type statusAllType = statusType | 'offline'
const useStatus = (mcc: Mt, mixMode: 0 | 1 | 2) => {
	const totalStatus = useTableInteractiveStore((state) => state.itemTotalStatus)
	//是否在线
	if (mcc.status.isOnline) {
		const status = getStatusIcon({ mcc, totalStatus, mixMode, ignoreLevel: true })
		const result = statusSplitDropDown(status)
		return result.mt
	} else {
		return { icon: ['offline'], dropDown: [] } as { icon: statusAllType[]; dropDown: statusAllType[] }
	}
}
export const ItemStatus: FC<ItemStatusProps> = ({ mcc, propWidth }) => {
	const mixMode = useMccStore((state) => state.mixMode)
	const { icon, dropDown } = useStatus(mcc, mixMode)
	const triggerRef = useRef<TriggerInstance>()
	return (
		<ItemStatusWrap style={{ width: propWidth }}>
			{icon.map((x) => StatusIconComponent[x](mcc))}
			{dropDown.length > 0 && (
				<Trigger
					trigger={['click']}
					ref={triggerRef}
					popup={
						<StatusDropDownWrap
							onClick={() => {
								triggerRef.current?.close()
							}}
						>
							{dropDown.map((x) => StatusIconComponent[x](mcc))}
						</StatusDropDownWrap>
					}
					preventOverflow
					popupAlign={{
						points: ['bl', 'tl'],
						offset: [0, 3],
					}}
				>
					<IconStatusMore className="icon-status-more" />
				</Trigger>
			)}
		</ItemStatusWrap>
	)
}
